<template>
  <div class="uploaddiv">
    <!--    上传营业执照-->
    <div class="IDdiv_item1" @click="clickUploadVideo"  v-if="type==3">
      <img src="http://job.dayinyun.com/business.png" v-if="cover==''" />
      <label v-if="cover==''">请上传营业执照</label>
      <img :src="cover" v-if="cover!=''" class="cover">
    </div>
    <div class="IDdiv_item2" @click="clickUploadVideo"  v-else-if="type==5">

      <!--      <img src="../assets/images/logo.png" v-if="cover==''" />-->
      <!--      &lt;!&ndash; <label v-if="cover==''">请上传营业执照</label> &ndash;&gt;-->
      <!--      <img :src="cover" v-if="cover!=''" class="cover">-->
    </div>
    <div class="IDdiv_item" @click="clickUploadVideo"  v-else>
      <template v-if="type==1">
        <img src="http://job.dayinyun.com/idCardfront.png" v-if="cover==''" />
        <label v-if="cover==''">请上传身份证正面照</label>
      </template>
      <template v-if="type==2">
        <img src="http://job.dayinyun.com/idCardBehind.png" v-if="cover==''" />
        <label v-if="cover==''">请上传身份证反面照</label>
      </template>
      <template v-if="type==4">
        <img src="http://job.dayinyun.com/certificate.png" v-if="cover==''" />
        <label v-if="cover==''">请上传相关证书</label>
      </template>
      <img :src="cover" v-if="cover!=''" class="cover">
    </div>
    <input type="file" ref="uploadvideo" style="display: none" @change="uploadVideo($event)">
  </div>
</template>
<script>
  import {GETTOKEN} from "../apis/mine";
  import * as qiniu from 'qiniu-js';
  export default {
    name: "Upload",
    props: ['type'],
    data() {
      return {
        cover:""
      };
    },
    methods: {
      clickUploadVideo(){
        this.$refs.uploadvideo.click();
      },
      uploadVideo (e) {
        // console.log(e);
        let that = this;
        let file = e.target.files[0];
        console.log(file)
        var  uploadInit ;
        let getToken = GETTOKEN
        getToken()
          .then(res => {
            // console.log(res)
            if(res.data.code*1==200) {
              uploadInit=res.data.data;
              if (uploadInit=="") { return; }
              this.uploadDomain ="http://up-z1.qiniup.com/";
              let key = new Date().getTime() + file.name;
              let config = {
                chunkSize: 8,
                region: qiniu.region.z1,
                domain: this.uploadDomain
              };
              var putExtra = {

                ...config,
              }
              // console.log(qiniu);

              let observable = qiniu.upload(file, key, uploadInit, putExtra, config);
              let subscription = observable.subscribe({
                next(res){
                  let process = res.total.percent;
                  that.process = Math.floor(process);
                },
                error(err){
                  Toast.fail("上传失败：" + err.message);
                },
                complete(res){
                  that.code=res.key;
                  that.cover="http://oss.dayinyun.com/"+res.key;
                  that.returnUrl();
                }
              });
            }
          })


      },
      cancelUpload () {
        // subscription.unsubscribe(); // 上传取消
      },
      returnUrl () {
        this.$emit('getUploadParam',"http://oss.dayinyun.com/"+this.code,this.type);
      }
    }
  };
</script>

<style lang="less" scoped>
  @import (reference) url(../assets/less/common);
  .uploaddiv
  {
    width: 98%;
    margin: 0 auto;
  }
  .IDdiv_item {
    width: 3.35rem;
    height: 2.3rem;
    background: rgba(35, 35, 35, 1);
    border-radius: 0.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .IDdiv_item1 {
    width: 5.7rem;
    height: 4.03rem;
    background: rgba(35, 35, 35, 1);
    border-radius: 0.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
  .IDdiv_item2 {
    width:1.56rem ;
    height: auto;
    /* background: rgba(35, 35, 35, 1); */
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
  .IDdiv_item2 img
  {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .IDdiv_item img,
  .IDdiv_item label {
    display: block;
    margin-top: 0.2rem
  }
  .IDdiv_item img {
    width: 50%;
    height: 1.07rem;
  }
  .IDdiv_item1 img {
    width: 2.4rem;
    height: 1.82rem;
  }
  .IDdiv_item label {
    font-size:@fontSize28;
    font-family: @fontFamily500;
    color: rgba(255, 255, 255, 1);
  }
  .IDdiv_item1 label {
    font-size:@fontSize28;
    font-family: @fontFamily500;
    color: rgba(255, 255, 255, 1);
    margin-top: 0.2rem;
  }
  .cover
  {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
</style>
